import { icons } from "./icons";
import { highlights } from "./hightThems";
import { mdThemes } from "./mdThemes";
const CODE_URL = "//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/";
const THEME_URL = "//wx.mmifx.com/markTheme/";
const CONFIG = {
  theme: "channing-cyan",
  highlight: "atom-one-dark",
};
const changeTheme = (themename) => {
  // 判断是否存在？
  const mdTheme =
    document.head.querySelector("#MD_THEME") || document.createElement("link");
  mdTheme.id = "MD_THEME";
  mdTheme.rel = "stylesheet";
  mdTheme.href = `${THEME_URL}${themename}.min.css`;
  document.head.contains(mdTheme) ? "" : document.head.appendChild(mdTheme);
};

const changeCode = (themename) => {
  // 判断是否存在？
  const codeTheme =
    document.head.querySelector("#CODE_THEME") ||
    document.createElement("link");
  codeTheme.id = "CODE_THEME";
  codeTheme.rel = "stylesheet";
  codeTheme.href = `${CODE_URL}${themename}.min.css`;
  document.head.contains(codeTheme) ? "" : document.head.appendChild(codeTheme);
};

/**
 * 解析内容 并生成config对象
 * @param {*} editor
 * @returns
 */
const parseConfig = (editor) => {
  let evalue = editor.getValue();
  // 匹配 --- ? ---
  const reg = /---\n(.+\n)+---\n/;

  try {
    reg
      .exec(evalue)[0]
      .split("\n")
      .filter((item) => item != "---" && item != "")
      .forEach((item) => {
        const _temp = item.split(": ");
        CONFIG[_temp[0]] = _temp[1];
      });
  } catch (error) {
    console.log("解析当前主题失败，使用默认配置");
  }
};

/**
 * 获取除了配置文件之外的内容
 * @param {}} value
 */
const getRealValue = (value) => {
  const res = /---\n(.+\n)+---\n/.exec(value);
  return res == null ? value : value.substring(res[0].length);
};

/**
 * 将配置文件转换为markdown并返回
 * @param {*} editor
 * @returns txt
 */
const configStringify = (editor) => {
  return `---
theme: ${CONFIG.theme}
highlight: ${CONFIG.highlight}
---
${getRealValue(editor.getValue())}
`;
};
export default function customToolBar() {
  changeCode("atom-one-dark");
  changeTheme("cyanosis");
  return {
    actions: [
      {
        title: "markdown主题",
        icon: icons.theme,
        handler: {
          type: "dropdown",
          actions: mdThemes.map((theme) => ({
            title: theme,
            icon: "",
            cheatsheet: undefined,
            handler: {
              type: "action",
              click({ editor }) {
                changeTheme(theme);
                parseConfig(editor);
                CONFIG.theme = theme;
                editor.setValue(configStringify(editor));
              },
            },
          })),
        },
      },
      {
        title: "代码高亮样式",
        icon: icons.code_theme,
        handler: {
          type: "dropdown",
          actions: highlights.map((theme) => ({
            title: theme,
            handler: {
              type: "action",
              click({ editor }) {
                changeCode(theme);
                parseConfig(editor);
                CONFIG.highlight = theme;
                editor.setValue(configStringify(editor));
              },
            },
          })),
        },
      },
    ],
  };
}
